<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router_3.0.2.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>  Vue 路由守卫  没登录不能去首页</h1>
    作业：
    用gitee  模拟多人合并项目
    1 组长上传项目 ---->gitee
      把组员加入开发者列表

    2 https://gitee.com/fanxing/h007git.git 
    组员 gitee >>> 拉取项目
    git clone https://gitee.com/fanxing/h007git.git

    3 合作写代码
     lzx 写新文件，日子---提交
     我  拉取 ，能看到lzx 新文件

     多人同时修改同一个文件，出现合并提示
     手动的去掉 》》》 ====== 你决定哪些代码保留
     写日志提交




    <div id="app">
        <a href="#/zhuye">主页</a> 
        <a href="#/keji">科技</a> 
        <hr> 
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
</body>
<script>
// 四个组件
var zhuye = {
    template:'<h1>Vue 主页内容</h1>'
};
var keji = {
    template:'<h1> 重要内容 </h1>'
};
var login = {
    template:`<div>
        <h1>登录页</h1>
        <input type='text' v-model='uname' />
        <input type='password' v-model='upass' />
        <button @click="handle">登录</button>
    </div>`,
    data(){
        return {
            uname: 'admin',
            upass: '123456'
        }
    },
    methods:{
        handle(){
            // 发 ajax 请求
            sessionStorage.setItem('LOGIN',this.uname)
            //localStorage.setItem('LOGIN',this.uname)
            alert('登录成功')
        }
    }
}

//路由对象  配置
var  router = new VueRouter({
    routes:[
        {path: '/' , redirect: '/login'},
        {path:'/zhuye' , component:zhuye},
        {path:'/keji' , component:keji},
        {path:'/login' , component:login}
    ]
});

// 守卫 to去哪里， from 来自
router.beforeEach( (to,from,next)=>{ 
    console.log('进入守卫', to);
    var obj =  sessionStorage.getItem('LOGIN');
    if(to.path == '/login' || obj ){
        next()  // 放行
    }else{
        next('/login')  
    }
})

var vm = new Vue({
    el: "#app",
    data:{
       
    },
    router
});
 

</script>
</html>